<template>
    <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <a-spin :loading="spinLoading" tip="数据加载中" style="width: 100%;height: 70vh;">
            <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
                <a-form-item label="选择仓库" field="stockroom_id">
                    <sa-select v-model="formData.stockroom_id" :data="paramsData.stockroomList"
                        :fieldNames="{ value: 'id', label: 'name' }"></sa-select>
                </a-form-item>
                <div class="sku_box">
                    <div class="sku_flex" v-for="(itm, idx) in formData.sku_list_arr" :key="idx">
                        <div class="sku_item">
                            <a-form-item label="SKU" required>
                                <a-input v-model="itm.sku" @blur="searchSku(itm.sku,idx)" placeholder="请输入sku进行检索"></a-input>
                            </a-form-item>
                            <a-form-item label="SKU数量" required>
                                <a-input-number hide-button v-model="itm.num" placeholder="请输入sku数量"></a-input-number>
                            </a-form-item>
                            <a-form-item label="SKU名称" v-if="itm.name">
                                <a-input v-model="itm.name" disabled placeholder="请输入sku"></a-input>
                            </a-form-item>
                            <a-form-item label="虚拟销量" v-if="paramsData.show_fake != 0">
                                <a-input-number hide-button v-model="itm.fake_num"></a-input-number>
                            </a-form-item>
                        </div>
                        <div class="handle_box">
                            <icon-plus-circle :size="36" style="color:#70a1ff;cursor: pointer;margin-left: 20px;" @click="add" v-if="idx==formData.sku_list_arr?.length-1" />
                            <icon-minus-circle :size="36" style="color:red;margin-left: 20px;cursor: pointer;" @click="desc(idx)" v-if="formData.sku_list_arr?.length!=1" />
                        </div>
                    </div>
                </div>
                <a-form-item label="快递名称" field="express_name" v-if="mode=='sync'">
                    <a-input v-model="formData.express_name" placeholder="请输入快递单号"></a-input>
                </a-form-item>
                <a-form-item label="快递单号" field="express_code" v-if="mode=='sync'">
                    <a-input v-model="formData.express_code" placeholder="请输入快递名称"></a-input>
                </a-form-item>
                <a-form-item label="备注" field="msg">
                    <a-input v-model="formData.msg" placeholder="请输入备注"></a-input>
                </a-form-item>
            </a-form>
        </a-spin>
    </component>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import cangkuApi from '@/api/system/system'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const spinLoading = ref(false)
const emit = defineEmits(["success"]);
const visible = ref(false);
const title = ref('云仓入库')
const formRef = ref()
const mode=ref('')
const loading = ref(false);
const formData = ref({
    stockroom_id: '',
    express_name: '',
    express_code: '',
    msg: '',
    sku_list_arr: [{ sku: '', name: '', id: '', num: '', fake_num: ''}],
})
const rules = ref({
    stockroom_id: [{ required: true, message: '请选择' }],
    sku: [{ required: true, message: '请输入' }],
    num: [{ required: true, message: '请输入' }],
    express_name: [{ required: true, message: '请输入' }],
    express_code: [{ required: true, message: '请输入' }],
});
const open = async (type, data) => {
    if (type == 'sync') {
        title.value = '云仓入库'
    } else { 
         title.value = '手动添加入库数量'
    }
    mode.value=type
    formRef.value.resetFields();
    formData.value.sku_list_arr=[{ sku: '', name: '', id: '', num: '', fake_num: ''}]
    visible.value = true;
    getParams()
}
const searchSku = async (sku,idx) => {
    if (!sku) return
    formData.value.sku_list_arr[idx].name=''
    
    try {
        spinLoading.value = true
        const { data } = await cangkuApi.cangku_input_add_search({ 'sku': sku })
        formData.value.sku_list_arr[idx].name = data.name
        formData.value.sku_list_arr[idx].id=data.id

    } finally {
        spinLoading.value = false
    }

}
const add = () => { 
    formData.value.sku_list_arr.push({ sku: '', name: '', id: '', num: '', fake_num: ''})
}
const desc = (idx) => { 
    formData.value.sku_list_arr.splice(idx,1)
}
const submit = throttle(async (done) => {
  const validate = await formRef.value?.validate()
  if (!validate) {
    loading.value = true
    try {
        let data = { ...formData.value }
      console.log('111',data.sku_list_arr);
        let result = {}
        if (mode.value == 'sync') {
            result = await cangkuApi.cangku_input_add(data)
        } else { 
            result = await cangkuApi.cangku_input_add_no_sync(data)
        }
      
      if (result.code === 200) {
        Message.success(result.msg || '操作成功')
        emit('success')
        done(true)
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false
      }, 500)
    } catch {
      loading.value = false
    }
  }
  done(false)
}, 100)
const paramsData = ref({})
const getParams = async () => {
    const { data } = await cangkuApi.cangku_input_add_config()
    paramsData.value = { ...data }
}
defineExpose({ open });
</script>
<style scoped lang="less">
.sku_box {
    background-color: #deecf9;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
    .sku_flex{
        padding-top: 10px;
        height: 50px;
        width: 100%;
        display: flex;
        background-color:#deecf9;
    }
    .sku_item {
        width: 80%;
        display: flex;
        // background-color: red;
        // margin-top:10px;
    }

    .handle_box {
        width: 20%;
        display: flex;

    }
}
</style>